<template>
  <div>
    <search-vm v-loading="loading" :title="tit" @refreshList="queryVendingList" />
    <div class="main">
      <el-row>
        <el-button size="small" class="add-btn" @click="addNode">新建</el-button>
        <el-button size="small" class="batch-btn">批量操作</el-button>
      </el-row>
      <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        >
        <el-table-column
          type="selection"
          width="55"
          height="20px"
        />
        <el-table-column
          type="index"
          label="序号"
          width="120"
        />
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="120"
          height="20px"
        >
          <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
        </el-table-column>

        <el-table-column
          prop="type.name"
          label="设备型号"
          width="120"
          height="20px"
        />
        <el-table-column
          prop="node.name"
          label="详细地址"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          prop="ownerName"
          label="合作商"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          v-if="vmStatus === 0 "
          prop="vmStatus"
          label="设备状态"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          v-else-if="vmStatus === 1"
          prop="vmStatus"
          label="设备状态"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          prop="vmStatus"
          label="设备状态"
          show-overflow-tooltip
          height="20px"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
          height="20px"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native.prevent="aisle(scope.row)"
            >
              货道
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="getQueryVending(scope.row)"
            >
              策略
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="reviseType(scope.row)"
            >
              修改
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" align="middle" style="height: 60px">
        <!-- 分页组件 -->
        <el-pagination
          background
          :page-size.sync="page.pageSize"
          :current-page.sync="page.pageIndex"
          layout="prev,pager, next,sizes,total"
          :total="total"
          @current-change="getSearchVending"
          @size-change="getSearchVending"
        />
      </el-row></div>
    <!-- 新建组件 -->
    <dialog-xinjian :dialog-visible.sync="dialogVisible" :vending-type="VendingType " :node-type="nodeType" @addFlush="getSearchVending" />
    <!-- （取消）策略组件 -->
    <dialog-celue v-if="isShow" :query-vending="queryVending" :dialog-visible1.sync="dialogVisible1" />
    <!-- 批量策略(选择策略)组件 -->
    <dialog-piliang v-else :dialog-visible2.sync="dialogVisible2" :amend-strategy="amendStrategy" :inner-code="innerCode" @refreshList="getSearchVending" />
    <!-- 修改策略 -->
    <dialog-amend-type :dialog-visible3.sync="dialogVisible3" :amend-type="amendType" />
    <!-- 货道 -->
    <aisle :aisledialog.sync="aisledialog" :goods-info="goodsInfo" />
  </div>
</template>

<script>
import { getSearchVendingAPI, VendingTypeAPI, getNodeSearchAPI, getQueryVendingAPI, amendStrategyAPI } from '@/api/vmIndex'
import searchVm from './components/search-vm'
import dialogXinjian from './components/dialog-xinjian'
import dialogCelue from './components/dialog-celue.vue'
import dialogPiliang from './components/dialog-piliang.vue'
import dialogAmendType from './components/dialog-amendType.vue'
import aisle from './components/aisle.vue'
export default {
  name: 'Shebeiguanli',
  components: {
    searchVm,
    dialogXinjian,
    dialogCelue,
    dialogPiliang,
    dialogAmendType,
    aisle
  },
  props: {},
  data() {
    return {
      tit: '设备编号',
      tableData: [],
      page: {
        pageIndex: 1,
        pageSize: 10
      },
      total: 0,
      vmStatus: '',
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      dialogVisible3: false,
      aisledialog: false,
      loading: false,
      VendingType: [], // 售货机类型
      nodeType: [], // 点位
      queryVending: {}, // 查询售货机策略
      isShow: true,
      amendStrategy: [], // 策略列表
      multipleSelection: [],
      innerCode: '',
      amendType: {},
      goodsInfo: {}
    }
  },
  computed: {

  },
  watch: {},
  created() {
    this.getSearchVending()
  },
  methods: {
    deleteRow() {},
    // 获取列表
    async getSearchVending() {
      try {
        this.loading = true
        const { data } = await getSearchVendingAPI(this.page.pageIndex, this.page.pageSize)
        console.log(data)
        this.tableData = data.currentPageRecords
        this.$store.commit('vm/seTtableData', data.currentPageRecords) // 把数组存到vuex中
        this.total = parseInt(data.totalCount) // 转数值型
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 点开新建  发起请求
    async addNode() {
      const { data } = await VendingTypeAPI()
      // console.log('售货机类型', data)
      this.VendingType = data.currentPageRecords
      const res = await getNodeSearchAPI()
      // console.log('点位信息', res)
      this.nodeType = res.data.currentPageRecords
      this.dialogVisible = true
    },
    // 点开策略 发起请求
    async getQueryVending(row) {
      this.dialogVisible2 = true // 打开弹窗
      console.log(row) // 可以
      this.innerCode = row.innerCode
      const res = await getQueryVendingAPI(row.innerCode)
      // console.log(res)
      this.queryVending = res.data
      this.dialogVisible1 = true
      if (res.data === '') { // 没有data 发起策略
        this.isShow = false
        this.dialogVisible2 = true
        const { data } = await amendStrategyAPI() // 策略列表
        console.log(data)
        this.amendStrategy = data
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 查询
    async  queryVendingList(innerCode) {
      try {
        this.loading = true
        const { data } = await getSearchVendingAPI(this.page.pageIndex, this.page.pageSize, innerCode)
        console.log(data)
        this.tableData = data.currentPageRecords
        this.total = parseInt(data.totalCount) // 转数值型
      } catch (error) {
        console.log(error)
      } finally {
        this.loading = false
      }
    },
    // 修改策略
    reviseType(row) {
      console.log(row)
      this.amendType = row
      this.dialogVisible3 = true
    },
    // 货道
    aisle(row) {
      this.aisledialog = true
      this.goodsInfo = row
    }
  }
}
</script>

<style scoped lang="scss">
.main{
box-sizing: border-box;
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  .add-btn{
    width: 80px;
    height: 36px;
    color: #fff;
    background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
  }
  .batch-btn {
    width: 80px;
    height: 36px;
        background-color: #fbf4f0!important;
  }
}
.el-table {
padding: unset;
}
 .el-table__row{
    height: 30px;
  }
</style>
